/**
 * 放大镜
 * 
 * 
 */
import $ from "jquery";
/**
 *
 * @var m_leftBox            ; 中等图片的包围盒
 * @var m_clipBox            ; 要放大的区域,即裁剪盒子
 * @var m_rightBox           ; 右边大图片的包围盒子
 * @var m_leftImg            ; 左边中等图片
 * @var m_rightImg           ; 右边大图片
 * @var m_tabCls             ; 选项框的class
 * @var m_tabActive          ; 选中的class
 * @var m_data               ; 图片数据
 * @var m_scale              ; 缩放比例
 * @var m_clipWidth          ; 裁剪宽度
 * @var m_clipHeight         ; 裁剪高度
 * @var m_lbWidth            ; 左边盒子的宽度
 * @var m_lbHeight           ; 左边盒子的高度
 * 
 * @param lbCls              ; 左边盒子class
 * @param clipCls            ; 裁剪盒子的class
 * @param rbCls              ; 右边盒子class
 * @param lImgCls            ; 左边图片class
 * @param rImgCls            ; 右边图片class
 * @param tabCls             ; 选项框的class
 * @param tabActive          ; 选中的class
 * @param data               ; 图片数据 {}
 * @data smallImgs           ; 小图片
 * @data midImgs             ; 中等图片
 * @data bigImgs             ; 大图片
 * 
 */
class Magnifier{
    constructor(param){
        this.init.apply(this,arguments);
    }
    init(param){
        this.m_leftBox = $(param.lbCls);
        this.m_clipBox = $(param.clipCls);
        this.m_rightBox = $(param.rbCls);
        this.m_leftImg = param.lImgCls ? $(param.lImgCls) : this.m_leftBox.find("img");
        this.m_rightImg = param.rImgCls ? $(param.rImgCls) : this.m_rightBox.find("img");
        this.m_tabCls = param.tabCls;
        this.m_tabActive = param.tabActive;
        this.m_data = param.data;
        this.m_scale = 0;
        this.m_clipWidth = 0;
        this.m_clipHeight = 0;
        this.m_lbWidth = parseFloat(this.m_leftBox.css("width"));
        this.m_lbHeight = parseFloat(this.m_leftBox.css("height"));
        this.bindEvent();
    }
    bindEvent(){
        let that = this;
        // 选项框绑定事件
        $(this.m_tabCls).eq(1).parent()
        .on("click",this.m_tabCls,function(){
            that.showTab.call(that,($(this).index()));
        });
        // 左边盒子绑定事件
        this.m_leftBox.on("mouseenter",$.proxy(this.showEle,this));
        this.m_leftBox.on("mouseleave",$.proxy(this.hideEle,this));
        this.m_leftBox.on("mousemove",$.proxy(this.followMove,this));
    }
    // 设置裁剪盒子尺寸
    setClipBoxSize(){
        if(this.m_scale) return false;
        this.m_scale = parseFloat(this.m_rightImg.css("width")) / parseFloat(this.m_leftImg.css("width"));
        let value = Math.round(parseFloat(this.m_rightBox.css("width")) / this.m_scale);
        let borderW = parseFloat(this.m_clipBox.css("border-width"));
        // 减去裁剪盒子的边框
        this.m_clipBox.css({
            "width" : value - borderW * 2,
            "height": value - borderW * 2
        });
        this.m_clipWidth = value;
        this.m_clipHeight = value;
    }
    // 根据选择，改变选项框样式，以及改变左右图片
    showTab(index){
        let cls = this.m_tabActive;
        if(cls)
            $(this.m_tabCls).addClass(function(){
                if(index == $(this).index()) return cls;
            })
            .removeClass(function(){
                if(index != $(this).index()) return cls;
            });
        
        this.m_leftImg.attr("src", this.m_data.midImgs[index]);
        this.m_rightImg.attr("src",this.m_data.bigImgs[index]);
    }
    // 显示右边图片，以及裁剪框
    showEle(){
        this.m_rightBox.css("display", "block");
        this.setClipBoxSize();
        this.m_clipBox.css("display","block");
    }
    // 隐藏右边图片，以及裁剪框
    hideEle(){
        this.m_rightBox.css("display", "none");
        this.m_clipBox.css("display","none");
    }
    // 裁剪框随鼠标移动
    followMove(e){
        let {pageX,pageY} = e;
        let offset = this.m_leftBox.offset();
        let [nLeft,nTop,lmax,tmax] = [
            pageX - offset.left - this.m_clipWidth / 2,
            pageY - offset.top - this.m_clipHeight / 2,
            this.m_lbWidth - this.m_clipWidth,
            this.m_lbHeight - this.m_clipHeight
        ]
        nLeft = nLeft < 0 ? 0 : nLeft;
        nLeft = nLeft > lmax ? lmax : nLeft;

        nTop = nTop < 0 ? 0 : nTop;
        nTop = nTop > tmax ? tmax : nTop;
        this.m_clipBox.css({
            "left": nLeft,
            "top": nTop
        });
        this.m_rightImg.css({
            "position": "absolute",
            "left": -nLeft * this.m_scale,
            "top": -nTop * this.m_scale
        });
    }
}

module.exports = Magnifier;